<!-- 支付的订单窗口 -->
<template>
	<view class="page">
		<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
			<view class="cu-bar fixed bg-gradual-red" :style="style"
				:class="[bgImage!=''?'none-bg text-white bg-img':'']">
				<view class="action" @click="back">
					<text class="cuIcon-back">{{title}}</text>
					<slot name="backText"></slot>
				</view>
				<view class="content" :style="[{top:StatusBar + 'px'}]">
					<slot name="content"></slot>
				</view>

			</view>
		</view>
		<!-- 	<cu-custom bgColor="bg-gradual-red" :isBack="true">
			<block slot="backText">{{title}}</block>

		</cu-custom> -->

		<scroll-view scroll-y="true" class="payBox">
			<view class="cu-card article  goodBox">
				<view class="cu-item shadow">
					<view class="title">
						<view class="text-cut">{{good.title}}</view>
					</view>
					<view class="content">
						<image class="contentImg" :src="good.cover" mode="aspectFill"></image>
						<view class="desc contentBox">
							<view class="text-cut">
								{{good.intro_detail}}
							</view>
							<view class="goodName-html" v-html="good.basic_info">

							</view>
							<view class="goodName2">
								上课时间：{{good.class_time}}
							</view>
							<view class="goodName2">
								上课地点：{{good.address}}
							</view>

						</view>

					</view>

					<view class="box-row">
						<view class="box-row-title">
							类型
						</view>
						<view class="box-row-right">
							{{good.subType[user.typeIndex].title}}
						</view>

					</view>
					<view class="box-row">
						<view class="box-row-title">
							金额
						</view>
						<view class="box-row-right">
							￥{{good.subType[user.typeIndex].price}}
						</view>

					</view>
					<view class="box-row" v-if="user.coupon.price!=''">
						<view class="box-row-title">
							{{user.coupon.title}}
						</view>
						<view class="box-row-right" style="color: red;">
							￥ - {{user.coupon.price}}
						</view>

					</view>
				</view>
			</view>

			<view class="cu-card article  goodBox">
				<view class="cu-item shadow">
					<view class="title">
						<view class="text-cut">报名信息</view>
					</view>
					<view class="content">
						<view class="desc">
							<view class="desc-info"> 姓名：{{user.name}}</view>
							<view class="desc-info" v-if="user.gender==1"> 性别：男</view>
							<view class="desc-info" v-if="user.gender==2"> 性别：女</view>
							<view class="desc-info"> 专业：{{user.major}}</view>
							<view class="desc-info"> 年级：{{user.grade}}</view>
							<view class="desc-info"> 手机号：{{user.phone}}</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="pay-foot">
			<view class="priceBox">
				<text class="text-price text-red">{{good.subType[user.typeIndex].price-user.coupon.price}}</text>
			</view>
			<view class="priceBotton">
				<button class="cu-btn round lg  bg-red baoming" @click="pay()">提交订单</button>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				title: '待付款订单',
				shuju: {},
				good: [],
				user: [],
				dat: [],
				issback:false,
			}

		},
		onLoad() {
			this.load();
		},

		onUnload() {
			let xx=()=>{
				let pages = getCurrentPages();
				let beforePage = pages[pages.length - 2];
				beforePage.$vm.upData("");
			}
			(this.issback==false)?xx():"";
			
			
		},
		computed: {
			style() {
				var StatusBar = this.StatusBar;
				var CustomBar = this.CustomBar;
				var bgImage = this.bgImage;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				if (this.bgImage) {
					style = `${style}background-image:url(${bgImage});`;
				}
				return style
			}
		},
		methods: {
			delOrder(){
				let pages = getCurrentPages();
				let beforePage = pages[pages.length - 2];
				beforePage.$vm.upData("");
				this.deleteOrder().then(() => {
					uni.navigateBack({
						delta: 1,
						success: function() {
							beforePage.$vm.upData("");
						}
				
					});
				}, () => {
				
					uni.navigateBack({
						delta: 1,
						success: function() {
							beforePage.$vm.upData("");
						}
				
					});
				});
			},
			/**
			 * 返回
			 */
			back() {
                this.issback=true;
				uni.showModal({
					title: "提示",
					content: "你还有未完成的订单，是否退出",
					success: (res) => {
						if (res.confirm) {
							this.delOrder();

						}

					}
				})

			},
			/**
			 * 删除订单
			 */
			/**
			 * 删除订单
			 * @param {Object} index
			 */
			deleteOrder() {
				return new Promise((recive, reject) => {

					let dat = {
						action: "cancelOrder",
						openId: this.Reques.sessionData.data.openId,
						orderNo: this.shuju.out_trade_no
					};
					uni.showLoading({
						title: ""
					});
					let error = () => {
						uni.hideLoading();
			
						reject();
					}
					this.Reques.commonQuest('xcx/order.api.php', 'POST', dat).then((res) => {
						if (res.data.code == 0 && res.statusCode == 200) {
							uni.hideLoading();
							recive();
						} else {
							error();
						}

					}, (err) => {
						error();
					});
				})



			},






			/**
			 * 加載订单
			 */
			load() {
				this.user = this.$pagmentData.userData;
				this.good = this.$pagmentData.goodData;
				let showMsg = (msg) => {
					uni.showModal({
						title: "提 示",
						content: msg,
						showCancel: false,
						success: () => {
							uni.navigateBack({
								animationType: 'pop-out',
								delta: 2,
								animationDuration: 200,
								refresh: true,
								success: function() {

								}
							});
						}

					});

				}

				this.Reques.commonQuest("xcx/course.api.php", "POST", this.user).then((res) => {
					console.log("paXXy " + JSON.stringify(res));
					if (res.data.code == 0) {
						let shuju = res.data.data;
						this.shuju = res.data.data;
						let data = {
							"action": "prePay",
							"orderNo": shuju.out_trade_no,
							"openId": this.user.openId

						};
						this.Reques.commonQuest('xcx/course.api.php', 'POST', data).then((dat) => {
							if (dat.data.code == 0) {
								this.dat = dat.data;
							} else {
								showMsg("创建失败，请稍后再试！");
							}
						}, (err) => {
							showMsg("创建失败，请稍后再试！");
							console.log(err);
						})
					} else {
						showMsg("创建失败，请稍后再试！");
					}
				}, (err) => {
					showMsg("创建失败，请稍后再试！");
					console.log(err);
				});
			},
			pay() { //开始支付订单
				let tishi = (title, content) => {
					uni.hideLoading();
					uni.showModal({
						title: title,
						content: content
					})
				}

				let pay = () => {
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: '' + this.dat.timeStamp,
						nonceStr: this.dat.nonceStr,
						package: this.dat.package,
						signType: this.dat.signType,
						paySign: this.dat.paySign,
						success: (res) => {
							//这里进行回调
							uni.showToast({
								title: "报名成功"
							});
							setTimeout(() => {
								uni.redirectTo({
									url: '../mycourse/mycourse',
									// url: '../goodDetail/home?courseId=' + this.user
									animationType: 'slide-in-left'
								});

							}, 1000);
						},
						fail: (err) => {
							// uni.showModal({
							// 	title: "温馨提示",
							// 	content: "支付失败！请稍后再试"
							// })
							console.log('pay-fail: ' + JSON.stringify(err));
						}
					});
				}
				let unpay = () => {
					let dat = {
						"action": "finishOrder",
						"orderNo": this.shuju.out_trade_no,
						"openId": this.user.openId
					}
					uni.showLoading({
						title: "请求中..."
					});
					this.Reques.commonQuest('xcx/course.api.php', 'POST', dat).then((res) => {
						uni.hideLoading();
						if (res.statusCode == 200 && res.data.code == 0) {
							uni.showToast({
								title: "报名成功"
							});
							setTimeout(() => {
								uni.redirectTo({
									url: '../mycourse/mycourse',
									animationType: 'slide-in-left'
								});

							}, 1000)
						} else {
							tishi('温馨提示', '报名失败！请稍后再试');
						}

					}, err => {
						tishi('温馨提示', '报名失败！请稍后再试');
					})


				}
				let conponP = (this.user.coupon.price != "") ? this.user.coupon.price : 0;
				let price = (this.good.subType[this.user.typeIndex].price) - conponP;
				console.log(this.good.subType[this.user.typeIndex].price + " : " + conponP);
				console.log("price " + price);
				(price > 0) ? (pay()) : unpay();




			}


		}


	}
</script>
<style scoped>
	.payBox {
		height: 80vh;
	}

	.pay-foot {
		position: absolute;
		bottom: 0;
		width: 100vw;
		background-color: white;
		height: 120rpx;
		display: flex;
		flex-direction: row;
		border-top: 1px solid #DBD7D7;
	}

	.priceBox {
		height: 100%;
		width: 60%;
		display: flex;
		align-items: center;
		font-size: 60upx;
		padding-left: 20rpx;
	}

	.priceBotton {
		width: 40%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.box-row {
		margin-top: 15rpx;
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 35upx;
		height: 60rpx;
		opacity: 0.7;
		position: relative;
	}

	.box-row-title {


		padding-left: 30upx;
	}

	.box-row-right {
		position: absolute;
		float: right;
		right: 15upx;
	}

	.contentImg {

		width: 40vw;
		height: 100%;
		margin-right: 20upx;
		border-radius: 6upx;

	}

	.contentBox {
		width: 60vw;
		height: 100%;
	}

	.desc-info {
		min-height: 60rpx;
	}
</style>
